<form action="#" class="layui-form" id="api-form">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label>名称:</label>
            <div class="layui-inline">
                <input type="text" name="gatewayApiName" id="gatewayApiName" autocomplete="off" placeholder="请输入名称"
                       class="layui-input">
            </div>
            <label>状态:</label>
            <div class="layui-inline">
                <select name="state" id="state">
                    <option value="">请选择</option>
                    <option value="0">无效</option>
                    <option value="1">有效</option>
                </select>
            </div>
            <!--            <button class="layui-btn" lay-submit lay-filter="appInfo-table" >搜索</button>-->
            <input type="button" class="layui-btn" id="btn" value="搜索"/>
        </div>
    </div>
</form>

<script type="text/html" id="api-mapping-head-bar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="goEdit"><i class="layui-icon">&#xe654;</i>添加</button>
        <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delete"><i class="layui-icon">&#xe640;</i>删除
        </button>
    </div>
</script>
<script type="text/html" id="api-mapping-api-mapping-bar">
    <a class="layui-btn layui-btn-xs" lay-event="edit-api-mapping">编辑</a>
</script>


<table class="layui-table" lay-filter="api-mapping-table" id="api-mapping-table">
</table>

<script>

    $(function () {
        render();

        search();
    });

    function search(){
        $('#btn').click(function () {
            var param = $("#api-form").serialize(); //获取搜索框的数据

            layui.use('table',function () {
                var table = layui.table;
                //渲染表格
                table.render({
                    id:'api-mapping-table'
                    , elem: '#api-mapping-table'
                    , toolbar:'#api-mapping-head-bar'
                    , url:'sys/apimapping/search?'+param
                    ,page: {limits: [5, 10, 15, 20, 25]}
                    , cols:[[
                        {checkbox: true}
                        , {field: "id", title: "ID", sort: true}
                        , {field: "gatewayApiName", title: "名称"}
                        , {field: "insideApiUrl", title: "URL"}
                        , {field: "serviceId", title: "serviceId"}
                        , {field: "description", title: "描述"}
                        , {
                            field: "state", title: "状态", templet: function (data) {
                                return (data.state == 1 ? "<span class='layui-badge layui-bg-green'>有效</span>": "<span class='layui-badge layui-bg-red'>无效</span>");
                            }
                        }
                        , {
                            field: "idempotents", title: "幂等性", templet: function (data) {
                                return (data.idempotents == 1 ? "<span class='layui-badge layui-bg-green'>幂等</span>":"<span class='layui-badge layui-bg-red'>非幂等</span>");
                            }
                        }
                        , {
                            field: "needfee", title: "是否收费", templet: function (data) {
                                return (data.needfee == 1 ? "<span class='layui-badge layui-bg-green'>收费</span>" : "<span class='layui-badge layui-bg-red'>免费</span>");
                            }
                        }
                        , {field: "right", title: "操作", toolbar: "#api-mapping-api-mapping-bar", width: 150}
                    ]]
                });
            })

        });
    }

    function render() {
        layui.use(['layer', 'table', 'form'], function () {
            var layer = layui.layer;
            var table = layui.table;
            var form = layui.form;

            //渲染表格
            table.render({
                id: "api-mapping-table"
                , elem: "#api-mapping-table"
                , toolbar: "#api-mapping-head-bar"
                , url: "sys/apimapping/table"
                , page: {limits: [5, 10, 15, 20, 25]}
                , cols: [[
                    {checkbox: true}
                    , {field: "id", title: "ID", sort: true}
                    , {field: "gatewayApiName", title: "名称"}
                    , {field: "insideApiUrl", title: "URL"}
                    , {field: "serviceId", title: "serviceId"}
                    , {field: "description", title: "描述"}
                    , {
                        field: "state", title: "状态", templet: function (data) {
                            return (data.state == 1 ? "<span class='layui-badge layui-bg-green'>有效</span>": "<span class='layui-badge layui-bg-red'>无效</span>");
                        }
                    }
                    , {
                        field: "idempotents", title: "幂等性", templet: function (data) {
                            return (data.idempotents == 1 ? "<span class='layui-badge layui-bg-green'>幂等</span>":"<span class='layui-badge layui-bg-red'>非幂等</span>");
                        }
                    }
                    , {
                        field: "needfee", title: "是否收费", templet: function (data) {
                            return (data.needfee == 1 ? "<span class='layui-badge layui-bg-green'>收费</span>" : "<span class='layui-badge layui-bg-red'>免费</span>");
                        }
                    }
                    , {field: "right", title: "操作", toolbar: "#api-mapping-api-mapping-bar", width: 150}
                ]]
            });

            //监听工具条
            table.on('toolbar(api-mapping-table)', function (obj) {
                switch (obj.event) {
                    case 'goEdit':
                        //添加操作
                        openEditWindows(null);
                        break;
                    case 'delete':
                        //删除操作
                        var checkLine = table.checkStatus('api-mapping-table').data;
                        if(checkLine.length>0){ //如果有选中的数据
                            layer.confirm('你确定要删除数据吗？',function (index) {
                                var param = "";
                                $.each(checkLine,function (i,e) {
                                    param+="&ids="+e.id;
                                })
                                //发送ajax请求
                                $.ajax({
                                    url:"sys/apimapping/delete"
                                    ,type:'POST'
                                    ,data: param
                                    ,success:function (result) {
                                        if(result.state){
                                            table.reload('api-mapping-table',{});  //重新加载表格
                                        }else {
                                            layer.msg(result.message);
                                        }
                                        layer.close(index);
                                    }
                                });
                            })
                        }

                        break;
                }
            });

            table.on('tool(api-mapping-table)', function (obj) {
                // console.log(obj);
                switch (obj.event) {
                    case 'edit-api-mapping':
                        openEditWindows(obj.data)
                        break;
                }
            })

            //添加或删除操作
            function openEditWindows(data) {
                layer.open({
                    type: 1   //显示第一种类型的弹窗
                    , content: $("#api-mapping-edit-layer").html()
                    , title: "编辑"
                    , area: ['500px', '400px']
                    , btn: ['提交', '取消']
                    , success: function (index, layero) {  //弹出弹框的回调函数
                        //加载form表单
                        form.render();
                        if (data != null) {    //编辑操作,回显数据
                            form.val("api-mapping-edit-form", data);
                        }
                    }
                    , yes: function (index, layero) {  //点击提交的回调函数
                        layer.load();
                        $.ajax({
                            url: "sys/apimapping/" + (data == null ? "add" : "update")
                            , type: 'POST'
                            , data: $("#api-mapping-edit-form").serialize()
                            , success: function (result) {
                                if (result.state) {
                                    table.reload("api-mapping-table");  //刷新表格
                                    layer.close(index); //关闭当前弹出层
                                } else {
                                    layer.msg(result.message);
                                }
                                layer.closeAll();
                            }
                        });
                    }
                });
            }

        });


    }
</script>

<script type="text/html" id="api-mapping-edit-layer">
    <form id="api-mapping-edit-form" style="width: 80%" class="layui-form" lay-filter="api-mapping-edit-form">
        <input type="hidden" name="id">

        <div class="layui-form-item">
            <label class="layui-form-label">名称</label>
            <div class="layui-input-block">
                <input type="text" name="gatewayApiName" required lay-verify="required" placeholder="请输入名称"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">URL</label>
            <div class="layui-input-block">
                <input type="text" name="insideApiUrl" required lay-verify="required" placeholder="请输入URL"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">serviceId</label>
            <div class="layui-input-block">
                <input type="text" name="serviceId" required lay-verify="required" placeholder="请输入serviceId"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">描述</label>
            <div class="layui-input-block">
                <input type="text" name="description" required lay-verify="required" placeholder="请输入描述"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block">
                <input type="radio" name="state" title="有效" value="1" checked>
                <input type="radio" name="state" title="无效" value="0">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">是否幂等</label>
            <div class="layui-input-block">
                <input type="radio" name="idempotents" title="幂等" value="1" checked>
                <input type="radio" name="idempotents" title="非幂等" value="0">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">是否收费</label>
            <div class="layui-input-block">
                <input type="radio" name="needfee" title="收费" value="1" checked>
                <input type="radio" name="needfee" title="免费" value="0">
            </div>
        </div>

    </form>
</script>


